<template>
  <Modal v-if="server" width="500px">
    <div class="flex h-100 flex-col py-8">
      <div class="core-head px-12 pb-8">
        <div class="text-bold">服务器配置</div>
        <div class="icon-button" @click="close">
          <img :src="closePng" width="16" />
        </div>
      </div>
      <div class="px-12 flex-1 flex flex-col">
        <div class="flex justify-between align-center config">
          <div class="text-666">
            <CoreButton
              padding="16px"
              background-color="#eee"
              color="#333"
              @click="create"
            >
              新建
            </CoreButton>
          </div>
          <div class="flex gc-4 align-center">
            <input v-model="data.net.baseUrl" type="text" :disabled="true" />
            <div class="tag server-title">
              {{ data.net.title || '未选择' }}
            </div>
          </div>
        </div>
        <div class="container flex-1">
          <ul>
            <li
              v-for="item in list"
              :key="item.title"
              :class="{ active: data.net.baseUrl === item.baseUrl }"
            >
              <template v-if="!item.edit">
                <div
                  class="flex justify-between px-12 py-4"
                  @click="selectServer(item)"
                >
                  <div>{{ item.title }}</div>
                  <div class="options flex gc-2 align-center">
                    <div
                      v-if="!item.static"
                      class="icon-button"
                      @click="deleteItem(item)"
                    >
                      <img :src="deletePng" width="16" height="16" />
                    </div>
                  </div>
                  <div
                    v-if="data.net.baseUrl === item.baseUrl"
                    class="star absolute"
                  >
                    <img :src="star" width="20" />
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="flex align-center justify-between px-12 py-8">
                  <input
                    v-model="item.title"
                    v-focus
                    type="text"
                    placeholder="请输入标题"
                  />
                  <input
                    v-model="item.baseUrl"
                    type="text"
                    placeholder="请输入URL"
                    @blur="comfirm(item)"
                  />

                  <button class="comfirm" @click.self="comfirm(item)">
                    确定
                  </button>

                  <button class="cancle" @click.self="cancle(item)">
                    取消
                  </button>
                </div>
              </template>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
  import Modal from '@/views/components/modal/Modal.vue';
  import closePng from '@/assets/images/close.png';
  import { computed } from 'vue';
  import { programData } from '@/store/program/utils';
  import star from '@/assets/images/star.png';
  import deletePng from '@/assets/images/delete.png';
  import { ServerOptions } from '@/store/program/types';
  import { message } from '@/views/components/message/bus';
  import CoreButton from '@/views/components/button/CoreButton.vue';
  import { defaultServeList } from './data';

  const props = defineProps<{ server: boolean }>();
  const emit = defineEmits(['update:server']);
  const data = programData();
  const selectServer = (item: ServerOptions) => {
    if (!item.baseUrl) return;
    data.net.baseUrl = item.baseUrl;
    data.net.title = item.title;
    message('已切换服务器');
  };
  const create = () => {
    data.serverList.push({
      baseUrl: '',
      title: '',
      edit: true,
      id: '',
    });
  };
  const deleteItem = (item: ServerOptions) => {
    data.serverList = data.serverList.filter((e) => e !== item);
  };
  const comfirm = (item: ServerOptions) => {
    if (!item.baseUrl && !item.baseUrl) {
      deleteItem(item);
    }
    item.edit = false;
  };
  const close = () => {
    emit('update:server', !props.server);
  };

  const cancle = (item: ServerOptions) => {
    deleteItem(item);
  };
  const list = computed(() => {
    return defaultServeList.concat(data.serverList);
  });
</script>

<style lang="scss" scoped>
  @import './style';
</style>
